<template>
	<view class="page">
		<view class="search-block">
			<view class="search-ico-wapper">
				<image class="search-ico"
					src="https://img1.baidu.com/it/u=3907802529,3222539600&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
			</view>
			<input type="text" placeholder="搜索超级英雄" maxlength="10" class="search-text" confirm-type="search"
				@confirm="searchCM" />
			<!-- <view>条数：{{this.searchList.length}}</view>
				<view>页数：{{this.page}}</view> -->
		</view>

		<view class="search-list page-block">

			<view class="search-wapper" v-for="(item,index) in searchList">
				<image class="poster" :src="item.img" :data-id="item.id" @click="info" mode="aspectFill"></image>
				<view>{{item.title}}</view>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchList: [{
						title: "复仇者联盟",
						score: 9.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img1.baidu.com/it/u=488054824,781673712&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟3",
						score: 6.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img0.baidu.com/it/u=3753972264,2197167502&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟2",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1804272601,468942649&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟2",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1804272601,468942649&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟4",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1809948875,2289979830&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟3",
						score: 6.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img0.baidu.com/it/u=3753972264,2197167502&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟4",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1809948875,2289979830&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟2",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1804272601,468942649&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟3",
						score: 6.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img0.baidu.com/it/u=3753972264,2197167502&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟4",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1809948875,2289979830&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟2",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1804272601,468942649&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟3",
						score: 6.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img0.baidu.com/it/u=3753972264,2197167502&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟4",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1809948875,2289979830&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟2",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1804272601,468942649&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟3",
						score: 6.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img0.baidu.com/it/u=3753972264,2197167502&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟4",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1809948875,2289979830&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟2",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1804272601,468942649&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟3",
						score: 6.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img0.baidu.com/it/u=3753972264,2197167502&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟4",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1809948875,2289979830&fm=26&fmt=auto&gp=0.jpg"
					}
				],
				keyword: "",
				page: 0,
				totalPage: 5,
				imgs: ['https://img1.baidu.com/it/u=488054824,781673712&fm=26&fmt=auto&gp=0.jpg',
					'https://img0.baidu.com/it/u=3753972264,2197167502&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=1804272601,468942649&fm=26&fmt=auto&gp=0.jpg'
				]

			}
		},
		onLoad() {
			this.searchList = [];
			this.searchList = this._search(0, 20);
		},
		onReachBottom() {
			console.log('页面滚动到底事件-onReachBottom')
			this.page += 1;

			if (this.page > this.totalPage) {
				console.log('onReachBottom：数据已经加载结束')
				return;
			}

			this.searchList = this.searchList.concat(this._search(this.page, 20));
			console.log(this.searchList)
		},
		methods: {
			searchCM(e) {
				console.log(e)
				var searchV = e.detail.value;
				this.keyword = searchV;
				this.searchList = [];
				uni.pageScrollTo({
					scrollTop:0
				})
				
				this.page = 0;

				this.searchList = this._search(this.page, 20)
			}
			,_search(page, rows) {
				// TODO 后台加载数据  （MOCK 100条数据）
				var searchList = [];

				uni.showLoading({
					mask: true,
					title: "搜索中..."
				})
				uni.showNavigationBarLoading();

				for (let i = 1 * page * 10; i < rows * (page + 1); i++) {
					searchList.push({
						id: i,
						title: "复仇者联盟" + i,
						score: 9.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: this.imgs[i % 3]
					})
				}

				setTimeout(function() {

					uni.hideNavigationBarLoading();
					uni.hideLoading();
				}, 800)

				return searchList;
			}
			,info(e){
				var id = e.currentTarget.dataset.id;
				
				uni.navigateTo({
					url:"../movie/movie?from=search&id=" + id 
				})
			}
			
		}
	}
</script>

<style>
	@import url("search.css");
</style>
